<template>
    <div class="left-slider">
        <mu-drawer :open.sync="open" :docked="docked" :right="position">
            <mu-list>
                <mu-list-item button>
                    <mu-list-item-title>Menu Item 1</mu-list-item-title>
                </mu-list-item>
                <mu-list-item button>
                    <mu-list-item-title>Menu Item 2</mu-list-item-title>
                </mu-list-item>
                <mu-list-item  @click="open = false" button>
                    <mu-list-item-title>Close</mu-list-item-title>
                </mu-list-item>
            </mu-list>
        </mu-drawer>
    </div>
</template>

<script>
export default {
    name: 'leftSlider',
    data(){
        return {
            open:false,
            docked:false,
            position:false
        }
    },
    mounted(){
    },
    destroyed(){
    },
    methods: {
        openSlider(){
            console.log(1)
            this.open = true;
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
</style>
